<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="button-groups">
            <button class="add">新增</button>
        </div>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
    </div>
</body>
<script>

    // 如何创建节点
    // document.createElement(tagName)  根据传入的标签名创建一个元素节点 => 返回被创建的元素节点

    // 注意: 
    // 被创建的元素节点默认存储在内存当中,只有放到页面中才会显示


    // 如何将创建的节点放到页面中?  
    // 1. 追加和预追加(父元素统筹 -> 父元素所有内容的最前面 / 最后面)    append追加   prepend预追加  => 
    // parentEle.appendChild(node)    向匹配的父元素中 追加 一个 节点(新的/页面中已存在的) => 父元素所有内容的最后方 
    // parentEle.append(node|string)    向匹配的父元素中 追加 一个 节点/文本(新的/页面中已存在的) => 父元素所有内容的最后方 
    // parentEle.prepend(node|string)    向匹配的父元素中 追加 一个 节点/文本(新的/页面中已存在的) => 父元素所有内容的最前方 

    // 2. 插入同级 (父元素统筹)
    // parentEle.insertBefore(newNode,oldNode)  在父元素中,将一个元素(新的/页面中已存在的) 插入到 另一个元素(页面中已存在的)的前面



    var add = document.querySelector(".add");
    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];

   // 需求: 点击新增按钮 创建一个li 放到.list的最后面
   add.onclick = function(){
        // 如何创建一个li
        var li = document.createElement("li"); // 创建一个元素节点(li)

        // 被创建的li -> 正常的元素节点 -> 修改内容 添加属性 修改样式 绑定事件
        li.innerText = "我是被新增的li";
        li.setAttribute("class","newLi");

        var list = ["red","orange","yellow","green","pink","#6ff"];
        var index= Math.floor(Math.random()*list.length);
        li.style.backgroundColor = list[index];

        li.onclick = function(){
            alert(11111);
        }

        // console.log(li);
        
        // ul.appendChild(li);   // 追加父元素
        // ul.append(li);   // 追加父元素
        // ul.append("hello");   // 追加父元素
        
        // ul.prepend(li);   // 追加父元素

        // ul.insertBefore(li,mid); // 将 新增的li 插入的 mid的前面
        ul.insertBefore(li,mid.nextElementSibling); // 将 新增的li 插入的 mid的后面
   }



</script>
</html>